<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏切换</title>
    <script src="jquery-1.11.3.min.js"></script>
    <style>
        *{padding:0;margin:0;}
        ul {
            list-style:none;clear:both;}
        a{color:#000; text-decoration:none;}
        .clear{clear:both;}
        .connter{
            width:965px;
           margin:100px auto 200px;
        }

        .tab {
            width:394px;
            height:35px;
            border:1px solid #dedede;


        }
        .tab ul{
             margin-left:10px;
        }
        .tab ul li{
            float:left;
           height:35px;
           line-height:35px;
        }
        .active{border-color:red;border-bottom:0;} 
           

      .con{
        width:965px;
        height:600px;
        border:1px solid #dedede;
      }
      .main{
        display:none;
      }
      .main ul li{
        float:left;
        width:240px;
        height:300px;
        border-right:1px solid #dedede;
      }
   
   
      .secon{
        display:block;
      }
    </style>
<script>
    $(function(){
        
        $(".tab .sss").mouseenter(function(){
            $(this).addClass("active").siblings().removeClass("active");
        });
    });
</script>
</head>
<body>
<div class="connter">
   <div class="tab clear">
       <ul>
           <li class="sss" class="active"><a href="">国际品牌1</a>丨</li>
           <li class="sss"><a href="">国际品牌2</a>丨</li>
           <li class="sss"><a href="">国际品牌3</a>丨</li>
           <li class="sss"><a href="">国际品牌4</a></li>
       </ul>
   </div>
   <div class="con">
       <div class="main secon">
           <ul>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
               <li><a href=""><img src="images/day1.jpg" ></a></li>
           </ul>
       </div>
       <div class="main">
           <ul>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
               <li><a href=""><img src="images/day2.jpg" ></a></li>
           </ul>
       </div>
       <div class="main">
           <ul>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
               <li><a href=""><img src="images/day3.jpg" ></a></li>
           </ul>
       </div>
   </div>
</div>
</body>
</html>